<template>
  <scroll-view
    scroll-y
    class="container"
    lower-threshold="0"
    @scrolltolower="onScrollToLower"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :refresher-triggered="isRefresh"
  >
    <commentList ref="commentListRef" :isRefresh="Refresh" />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import commentList from "./components/commentList.vue";
let commentListRef = ref();

const onScrollToLower = () => {
  commentListRef.value.getMore();
};
onMounted(() => {
  commentListRef.value.initData();
});

let Refresh = ref(false);
let isRefresh = ref(false);
const onRefresh = async () => {
  isRefresh.value = true;
  const res = await commentListRef.value.initData();

  if (res === 200) {
    isRefresh.value = false;
  } else {
    isRefresh.value = false;
    uni.showToast({
      title: "刷新失败",
      icon: "none",
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - var(--window-top));
}
</style>
